<script setup lang="ts">
import type { Ref } from "vue";
import type { DictItemListResult, DictTypeListResult } from "@/api/types";
import { computed, watch } from "vue";
import { $t } from "@/plugins/i18n";
import { useDictItemFormDialog, useDictItemTable } from "../composables";
import DictItemFormDialog from "./DictItemFormDialog.vue";

interface Props {
    visible?: boolean;
    dictType: Ref<DictTypeListResult | null>;
}

interface Emits {
    (e: "update:visible", visible: boolean): void;
}

const props = withDefaults(defineProps<Props>(), {
    visible: false,
});

const emit = defineEmits<Emits>();
const deptTypeCode = computed(() => props.dictType.value?.code || "");

const {
    tableLoading,
    tableQuery,
    tableFilteredData,
    fetchTableData,
    handleSetDefault,
    handleCancelDefault,
    handleDelete,
} = useDictItemTable(deptTypeCode);

// 使用对话框 hook
const {
    dialogVisible,
    itemDetail,
    openAddDialog,
    openEditDialog,
} = useDictItemFormDialog();

watch(
    () => props.visible,
    (val) => {
        if (val) fetchTableData();
    },
);

function handleDrawerClose() {
    emit("update:visible", false);
}

// 获取标签类型
function getTagType(status: boolean): "success" | "info" {
    return status ? "success" : "info";
}
</script>

<template>
    <el-drawer
        :model-value="visible"
        :title="$t('title.dictList') + (dictType.value ? ` - ${dictType.value.name}` : '')"
        size="900px"
        @close="handleDrawerClose"
    >
        <div class="h-full flex flex-col">
            <el-form :inline="true" :model="tableQuery" class="w-full" @submit.prevent>
                <el-form-item>
                    <el-input
                        v-model.trim="tableQuery.name"
                        clearable
                        class="w-60!"
                        :placeholder="$t('placeholder.inputName')"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="openAddDialog">
                        {{ $t("button.add") }}
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table
                v-loading="tableLoading"
                :data="tableFilteredData"
                border
                stripe
            >
                <el-table-column prop="name" :label="$t('label.name')" />
                <el-table-column prop="value" :label="$t('label.dataValue')" />
                <el-table-column prop="rank" :label="$t('label.sort')" />
                <el-table-column prop="status" :label="$t('label.status')">
                    <template #default="{ row }">
                        <el-tag :type="getTagType(row.status)">
                            {{ row.status ? $t("label.enable") : $t("label.disable") }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="default" :label="$t('label.isDefault')">
                    <template #default="{ row }">
                        <el-tag :type="getTagType(row.default)">
                            {{ row.default ? $t("status.yes") : $t("status.no") }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('label.operation')" width="200">
                    <template #default="{ row }:{ row: DictItemListResult }">
                        <el-button type="primary" link @click="openEditDialog(row)">
                            {{ $t("button.edit") }}
                        </el-button>
                        <el-button v-if="!row.default" type="primary" link @click="handleSetDefault(row.id)">
                            {{ $t("button.setDefault") }}
                        </el-button>
                        <el-button v-else type="primary" link @click="handleCancelDefault(row.id)">
                            {{ $t("button.cancelDefault") }}
                        </el-button>
                        <el-delete-button is-box @confirm="handleDelete(row.id)" />
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <DictItemFormDialog
            v-model:visible="dialogVisible"
            :edit-data="itemDetail"
            :dict-type="dictType"
            @success="fetchTableData"
        />
    </el-drawer>
</template>
